import React, { Fragment, useState, useEffect } from 'react';
import { Button, Tree, Form, Input, Col, Row, Select } from 'antd';
import axios from 'axios';
import './addtype.less';
import { DownOutlined } from '@ant-design/icons';
const Index = () => {
  const [treedata, settreedata] = useState();
  const [options, setoptions] = useState();
  useEffect(() => {
    getNotice();
    getNoticeType();
  }, []);
  const getNotice = async () => {
    let { data } = await axios.get('http://127.0.0.1:7777/news/notice');
    settreedata(data.noticedata);
  };
  const getNoticeType = async () => {
    let { data } = await axios.get('http://127.0.0.1:7777/news/noticetype');
    setoptions(data);
  };
  const onSelect = (keys) => {};
  const onGenderChange = () => {};

  return (
    <Fragment>
      <div>
        <div className="usermenu">
          <Button
            className="user_btn"
            onClick={() => {
              history.push('/home/system/adduser');
            }}
          >
            新建
          </Button>
          <Button className="user_btn">保存</Button>
          <Button className="user_btn">删除</Button>
        </div>
        <div className="types">
          <div className="type_left">
            {treedata && (
              <Tree
                showLine
                switcherIcon={<DownOutlined />}
                defaultExpandAll
                checkStrictly={true}
                treeData={treedata}
                onSelect={onSelect}
              />
            )}
          </div>
          <div className="type_right">
            <Form
              name="wrap"
              labelAlign="left"
              colon
              labelCol={{
                span: 2,
              }}
              colon={false}
              style={{
                maxWidth: 1000,
              }}
            >
              <Form.Item label="分类名称：" name="noticeName">
                <Input />
              </Form.Item>
              <br />
              <Form.Item name="_id" label="上级分类：">
                <Select onChange={onGenderChange} allowClear>
                  {options &&
                    options.map((item) => {
                      return <Option value="male">{item.noticeName}</Option>;
                    })}
                </Select>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
    </Fragment>
  );
};

export default Index;
